<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>角色列表</title>


	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>


</head>
<body>
<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div class="vue-box">

	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">检索参数</div>
		<el-form ref="form">
			<div class="c-item" style="display: none;">
				<label class="c-label">名称：</label>
				<el-input @keyup.enter="f5" placeholder="模糊搜索" size="mini" v-model="p.name"></el-input>
			</div>
			<div class="c-item" style="min-width: 0px;">
				<el-button @click="f5" icon="el-icon-search" size="mini" type="primary">查询</el-button>
			</div>
		</el-form>
	</div>

	<!-- 数据栏 -->
	<div class="c-panel c-table">
		<div class="c-title">列表</div>

		<el-table :data="dataList" class="data-table" size="mini" style="width: 100%">

			<el-table-column label="编号" type="index" width="50px"></el-table-column>

			<el-table-column label="角色名称">
				<template slot-scope="scope">
					<el-input :readonly="!scope.row.lock?false:'readonly'" size="mini"
					          v-model="scope.row.name"></el-input>
				</template>
			</el-table-column>

			<el-table-column label="责任描述">
				<template slot-scope="scope">
					<el-input :readonly="!scope.row.lock?false:'readonly'" autosize size="mini" type="textarea"
					          v-model="scope.row.desc"></el-input>
				</template>
			</el-table-column>

			<el-table-column label="是否锁定" title="锁定的角色为系统维持正常运行的重要角色，不可删除">
				<template slot-scope="scope">
					{{scope.row.lock ? '是' : '否'}}
				</template>
			</el-table-column>

			<el-table-column label="操作" prop="address" width="220px">
				<template slot-scope="scope">
					<el-button @click="update(scope.row)" size="mini" type="text">
						<span :style="scope.row.lock ? 'display: none;' : ''">修改</span>
					</el-button>
					<el-button :style="scope.row.lock ? 'display: none;' : ''" @click="del(scope.row)" size="mini"
					           type="text">删除
					</el-button>
					<el-button @click="menu_setup(scope.row)" size="mini" type="text">分配权限</el-button>
				</template>
			</el-table-column>

		</el-table>

	</div>


	<!-- 添加 -->
	<div class="c-panel">
		<h4 class="c-title">添加</h4>

		<el-table :data="[{}]" class="data-table" size="mini" style="width: 100%">

			<el-table-column label="角色名称">
				<template slot-scope="scope">
					<el-input size="mini" v-model="addData.name"></el-input>
				</template>
			</el-table-column>

			<el-table-column label="责任描述">
				<template slot-scope="scope">
					<el-input size="mini" v-model="addData.desc"></el-input>
				</template>
			</el-table-column>

			<el-table-column label="是否锁定" title="锁定的角色为系统维持正常运行的重要角色，不可删除">
				<template slot-scope="scope">
					{{scope.row.lock? '是' : '否'}}
				</template>
			</el-table-column>

			<el-table-column label="操作" prop="address">
				<template slot-scope="scope">
					<el-button @click="add" size="mini" type="text">添加</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>


</div>
<script>

    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa, 	// 超级对象
            p: {	// 查询参数
                name: '',
            },
            dataList: [],	// 数据集合
            addData: {		// 添加信息
                name: '',
                desc: '',
                lock: false,
            }
        },
        methods: {
            // 刷新
            f5: function () {
                sa.get('/role', {}, function (res) {
                    if (res && res.state) {
                        this.dataList = sa.$util.listAU(res.data);
                    }
                }.bind(this));
            },
            // 修改
            update: function (data) {
                sa.put('/role', JSON.stringify(data), function (res) {
                    if (res && res.state && res.state) {
                        layer.alert('修改成功', {}, function () {
                            this.f5();
                            layer.closeAll();
                        }.bind(this));
                    }
                })
            },
            // 删除
            del: function (data) {
                if (data.lock) {
                    return layer.alert('此角色是维持系统正常运行的重要角色，已被锁定，不可删除');
                }
                layer.confirm('是否删除，此操作不可撤销', {}, function () {
                    sa.delete('/role', JSON.stringify(data), function (res) {
                        if (res && res.state && res.state) {
                            layer.alert('删除成功', {}, function () {
                                this.f5();
                                layer.closeAll();
                            }.bind(this));
                        }
                    }.bind(this))
                }.bind(this))
            },
            // 添加
            add: function (arg) {
                let data = sa.$util.copyJSON(this.addData);
                sa.post('/role', data, function (res) {
                    if (res && res.state && res.data) {
                        layer.alert('添加成功', {}, function () {
                            this.f5();
                            layer.closeAll();
                        }.bind(this));
                    } else {
                        layer.alert('添加失败');
                    }
                }.bind(this))
            },
            // 修改菜单
            menu_setup: function (data) {
                layer.open({
                    type: 2,
                    title: '为 [' + data.name + '] 分配权限',
                    shadeClose: false,
                    shade: 0.8,
                    area: ['70%', '100%'],
                    content: 'menu-setup.html?role_id=' + data.id
                });
            }
        },
        created: function () {
            this.f5();
        }
    });
</script>

</body>
</html>